<!DOCTYPE html>
<html>
<head>
  <title>canvas 粒子</title>
  <style type="text/css">
    *{
      padding: 0;
      margin:0;
    }
  </style>
</head>
<body>

<div id="container">
  <canvas id="ID">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
  window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();
var dots=[];
(function(){
var canvas = document.getElementById('ID');
var ctx = canvas.getContext('2d');
const time=1;
const num=30;
 canvas.width = window.innerWidth ;
canvas.height = window.innerHeight ;
  
function dot(x,y,vx,vy){
  this.x=x;
  this.y=y;
  this.vx=vx;
  this.vy=vy;
  this.size=Math.ceil(Math.random()*3+2);
  this.ctx={};
}
dot.prototype.render = function(ctx) {
  ctx.save();
  this.ctx=ctx;
  this.ctx.beginPath();
  this.ctx.fillStyle='lightgray';
  this.ctx.arc(this.x-this.size/2,this.y-this.size/2,this.size,0,Math.PI*2);
  this.ctx.closePath();
  this.ctx.fill();
  ctx.restore();
};
dot.prototype.update = function() {
  this.ctx.clearRect(0,0,canvas.width,canvas.heihgt);
  this.x=this.x+this.vx*time;
  this.y=this.y+this.vy*time;
  //console.log(this.vx*time);
  this.vx = (this.x < canvas.width && this.x > 0) ? this.vx : (-this.vx);
  this.vy = (this.y < canvas.height && this.y > 0) ? this.vy : (-this.vy);
  this.render(this.ctx);
};
for(let i=0;i<num;i++){
  var x=Math.ceil(Math.random()*canvas.width);
  var y=Math.ceil(Math.random()*canvas.height);
  var vx=Math.ceil(Math.random()*2);
  var vy=Math.ceil(Math.random()*2);
  var d=new dot(x,y,vx,vy);
  d.render(ctx);
  dots.push(d);
}
requestAnimFrame(anim);
function anim(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  for(let i=0;i<dots.length;i++){
      dots[i].update();
  }
  requestAnimFrame(anim);
}
}());
</script>
</body>
</html>